<template>
  <div class="movies">
    <van-sticky>
      <div class="tab">
        <div class="address">上海<van-icon name="arrow-down" /></div>
        <van-tabs
          v-model="activeName"
          @click="onClick"
          title-active-color="red"
        >
          <van-tab title="正在热映" name="a"></van-tab>
          <van-tab title="即将上映" name="b"></van-tab>
        </van-tabs>
        <div class="search"><van-icon name="search" /></div>
      </div>
    </van-sticky>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'a'
    }
  },
  methods: {
    onClick (name, title) {
      if (title === '正在热映' && name === 'a') {
        this.$router.push('/movies/nowPlaying')
      } else {
        this.$router.push('/movies/comingSoon')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.movies {
  .tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // position: fixed;
    // top: 0;
    // left: 0;
    background: #fff;
    // width: 100%;
    // z-index: 99;
    .address {
      width: 47px;
      padding-left: 15px;
      font-size: 15px;
    }
    .van-tabs {
      width: 240px;
    }
    .search {
      width: 20px;
      height: 20px;
      padding: 0 15px 0 10px;
      .van-icon {
        color: red;
        font-weight: 700;
        font-size: 24px;
      }
    }
  }
}
</style>
